<template>
	<view class="u-margin-left-20 u-margin-right-20">
		<u-navbar :is-back="true" title="房源" :border-bottom="false" back-text="返回" :custom-back="goHome"></u-navbar>
		<view>
			<u-swiper :list="swiperlist" :height="750" mode="number" effect3d effect3d-previous-margin="20"
				:interval="5000" @click="clickImg"></u-swiper>
		</view>
		<view class="item u-margin-top-5">
			<view class="item-title">{{room.villageName}} |
				{{room.type == '整租' ? room.houseNum + room.houseHall + room.toiletNum : room.roomType}}
			</view>
			<view class="item-price">¥{{room.price}}/月</view>
		</view>
		<view class="item" style="display: flex;align-items: center;flex-wrap: wrap;">
			<view v-for="(item,index) in tagList" :key="index" style="background-color: #f5f5f5;color: #606266;margin-right: 15rpx;
			  margin-top: 15rpx;padding: 0 10rpx;height: 60rpx;line-height: 60rpx;">
				{{item.title}}
			</view>
		</view>
		<!-- 小程序通讯 -->
		<!-- <button type="default" open-type="contact"  class="clearBtn">
			<u-cell-group>
				<u-cell-item title="服务费另计" value="在线咨询"></u-cell-item>
			</u-cell-group>		
		</button> -->
		<view v-if="room.introduce">
			<u-gap height="10" bg-color="#f8f8f8"></u-gap>
			<u-card title="房源介绍" :border="false" :head-border-bottom="false" padding="0" title-size="38">
				<view class="u-padding-top-45 item" slot="body">
					{{room.introduce}}
				</view>
			</u-card>
		</view>
		<u-gap height="1" bg-color="#f8f8f8"></u-gap>
		<view style="position: relative;">
			<u-card title="小区介绍" :border="false" :head-border-bottom="false" padding="0" title-size="38">
				<view class="u-padding-top-45" slot="body">
					<view class="u-flex" style="justify-content: space-between;">
						<view class="item">
							<view>建筑年份：{{room.startDate||'暂无数据'}}</view>
							<view>建筑类型：{{room.type||'暂无数据'}}</view>
						</view>
						<!-- <image src="https://img11.360buyimg.com/n7/jfs/t1/94448/29/2734/524808/5dd4cc16E990dfb6b/59c256f85a8c3757.jpg" mode="widthFix" -->
						<!-- style="width: 250rpx;height: 200rpx;"></image> -->
					</view>
				</view>
			</u-card>
		</view>
		<u-gap height="1" bg-color="#f8f8f8"></u-gap>
		<view style="position: relative;">
			<u-card :title="room.villageName" :border="false" :head-border-bottom="false" padding="0" title-size="38">
				<view class="u-padding-top-45" slot="body">
					<map :latitude="latitude" :longitude="longitude">
						<cover-view style='width:100%;height:100%;' @click="clickMap"></cover-view>
					</map>
					<view @click="clickMap" style="margin-top: 30rpx;padding-left: 10rpx;height:80rpx;
					line-height: 80rpx;background-color: #fdfdfd;border-radius: 6px;
					display: flex;justify-content: space-between;
					padding-right: 10rpx;color: #909399;
					">
						<view>
							<u-icon name="map" color="#909399" size="30"></u-icon>
							<text style="margin-left: 8rpx;">
								房源直线距离约 {{distance}} km
							</text>
						</view>
						<view>
							<text style="margin-right: 3rpx;">
								导航
							</text>
							<u-icon name="arrow-right" color="#909399" size="30"></u-icon>
						</view>
					</view>
					<view style="margin-top: 20rpx;margin-left: 10rpx;font-size: 10px;
							color: #909399">
						*数据仅供参考，请以实际看房为准
					</view>
				</view>
			</u-card>
		</view>
		<!-- <u-gap height="1" bg-color="#f8f8f8"></u-gap> -->
		<!-- <view style="position: relative;">
			<u-card title="服务介绍" :border="false" :head-border-bottom="false" padding="0" title-size="38">
				<view class="u-padding-top-35" slot="body">
					<u-cell-group :border="false">
						<u-cell-item icon="heart" title="承诺-四大租住承诺，安心有保障" :arrow="false" hover-class="none" :border-bottom="false"></u-cell-item>
						<u-cell-item icon="level" title="品质-两类品质保障，入住更无忧" :arrow="false" hover-class="none" :border-bottom="false"></u-cell-item>
						<u-cell-item icon="star" title="服务-两项日常服务，生活超便捷" :arrow="false" hover-class="none" :border-bottom="false"></u-cell-item>
						<u-cell-item icon="rmb" title="付款-多种付款方式，支付更灵活" :arrow="false" hover-class="none" :border-bottom="false"></u-cell-item>
					</u-cell-group>
				</view>
			</u-card>
		</view> -->
		<!-- <u-gap height="1" bg-color="#f8f8f8"></u-gap>
		<view style="position: relative;">
			<u-card title="房源评价" :border="false" :head-border-bottom="false" padding="0" title-size="38">				
				<view class="u-padding-top-50 u-padding-bottom-50" slot="body">					
					<u-cell-group :border="false">
						{{evaluate}}
						<text style="float: right;color: #909399;font-size: 13px;">{{credt}}</text>
					</u-cell-group>
				</view>		
				<view slot="foot" style="padding-top: 30rpx;float: right;">
					<u-icon name="chat-fill"></u-icon>
					<text @click="moreEval" style="text-align: center;font-size: 12px;margin-left: 5rpx;">更多评价（{{evalsize}}）</text>
				</view>
			</u-card>
		</view>	 -->
		<!-- <u-gap height="10" bg-color="#f8f8f8"></u-gap>
		<view style="position: relative;padding-bottom: 50rpx;">
			<u-card title="经纪人" :border="false" :head-border-bottom="false" padding="0" title-size="38">
				<view class="u-padding-top-45" slot="body">
					<view class="u-flex">
					    <view class="u-m-r-20">
					        <u-avatar :src="room.agentAvatar" size="80"></u-avatar>
					    </view>
					    <view class="u-flex-1">
							<view class="u-font-16 u-p-b-40">{{room.agentName}}</view>
					        <view class="u-font-12 u-p-b-10">{{user.agentPhone}}</view>
					    </view>
					</view>
					<view class="arrow-right" @click="clickItem">
						<view class="phone">
							<u-icon name="phone" class="u-p-l-10" color="#d1d1d1"
							size="40"
							></u-icon>
						</view>
					</view>
				</view>
			</u-card>
		</view>	 -->

		<view class="navigation">
			<view class="left">
				<button type="default" open-type="contact" class="clearBtn" style="font-size: 14px;color: #6a6a6a;">
					<view class="item">
						<u-icon name="server-fill" :size="40"></u-icon>
						<view class="text">客服</view>
					</view>
				</button>
				<view class="item" @click="heartHouse">
					<u-icon name="heart" :size="40" v-if="!room.heart"></u-icon>
					<u-icon name="heart-fill" color="#ff9900" :size="40" v-if="room.heart"></u-icon>
					<view class="text">收藏</view>
				</view>
				<!-- <button type="default" open-type="share" class="clearBtn" style="font-size: 14px;color: #6a6a6a;">
					<view class="item">
						<u-icon name="zhuanfa" :size="40"></u-icon>
						<view class="text">分享</view>
					</view>
				</button> -->
			</view>
			<view class="right" @click="clickItem">
				<view class="btn">联系房东</view>
			</view>
		</view>
	</view>
</template>

<script>
	import config from "@/common/config.js" // 全局配置文件
	import {
		saveHeart,
		findHouseById,
		getShareConfig
	} from "@/common/api.js"

	export default {
		data() {
			return {
				shareTitle: '',
				room: {
					villageName: '',
					houseNum: '',
					houseHall: '',
					toiletNum: '',
					roomType: '',
					direction: '',
					price: '',
					introduce: '',
					heart: false,
				},
				village: {
					year: '',
					type: '',
					green: '',
				},
				swiperlist: [],
				tagList: [],
				//评价列表
				evaluList: [],
				user: {},
				longitude: 120.14,
				latitude: 30.35,
				distance: 0,
				//自己的评论
				ownevalu: '',
				houseId: null,
				evalsize: 0,
				havem: false,
				evaluate: '',
				credt: ''
			}
		},
		filters: {
			filterType(value) {
				return value === 0 ? '整租' : '合租'
			},
			filterRoomType(roomType) {
				if (roomType == 1) {
					roomType = '主卧'
				} else if (roomType == 2) {
					roomType = '次卧'
				} else {
					roomType = '未知'
				}
			}
		},
		onLoad: function(option) {
			console.log("detail option=", option)
			let houseId = option.houseId //上个页面传递的参数。
			this.houseId = houseId
			// 渲染当前房源信息
			this.findHouseById(houseId);

			// // 在页面中定义激励视频广告
			// let videoAd = null
			// // 在页面onLoad回调事件中创建激励视频广告实例
			// if (wx.createRewardedVideoAd) {
			//   videoAd = wx.createRewardedVideoAd({
			// 	adUnitId: 'adunit-8cd5789a01a51891'
			//   })
			//   videoAd.onLoad(() => {
			// 	  console.log('激励视频 成功加载广告')
			//   })
			//   videoAd.onError((err) => {})
			//   videoAd.onClose((res) => {
			// 	  console.log('激励视频 成功关闭广告')
			//   })
			// }
			// // 用户触发广告后，显示激励视频广告
			// if (videoAd) {
			//   videoAd.show().catch(() => {
			// 	// 失败重试
			// 	videoAd.load()
			// 	  .then(() => videoAd.show())
			// 	  .catch(err => {
			// 		console.log('激励视频 广告显示失败')
			// 	  })
			//   })
			// }
		},
		methods: {
			heartHouse() {
				// 收藏
				saveHeart({
					heart: this.room.heart,
					houseId: this.houseId,
				}).then(res => {
					this.room.heart = !this.room.heart
					this.$mytip.toast(result.msg)
				})
			},
			//获取分享配置参数
			getShareConfig() {
				const path = window.location.href
				getShareConfig({
					url: path
				}).then(res => {
					this.$wx.config({
						debug: false,
						appId: 'wxd30a3cbbd5789f3b', // 必填，公众号的唯一标识
						timestamp: res.data.timestamp, // 必填，生成签名的时间戳
						nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
						signature: res.data.signature, // 必填，签名
						jsApiList: ['onMenuShareTimeline',
							'onMenuShareAppMessage'
						] // 必填，需要使用的JS接口列表
					});

					this.$wx.onMenuShareAppMessage({
						title: this.shareTitle, // 分享标题
						desc: this.shareTitle, // 分享描述
						link: res.data.url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
						imgUrl: this.room.faceUrl, // 分享图标
						success: function(res) {
							console.log("设置成功了")
						}

					})

					this.$wx.onMenuShareTimeline({
						title: this.shareTitle, // 分享标题
						link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
						imgUrl: this.room.faceUrl, // 分享图标
						success: function(res) {
							console.log("设置成功了")
							// 设置成功
						}
					})
				})
			},
			goHome() {
				uni.reLaunch({
					url: '../index/index'
				})
			},
			clickItem() {
				//拨打固定电话
				// uni.makePhoneCall({
				// 	phoneNumber: this.room.owerPhone,
				// });
				window.location.href = 'tel:'+this.room.owerPhone
				return false
				uni.authorize({
					scope: 'scope.makePhoneCall',
					success: () => {
						uni.makePhoneCall({
							phoneNumber: this.room.owerPhone,
							success: () => {
								console.log('拨打电话成功！');
							},
							fail: () => {
								console.error('拨打电话失败！');
							}
						});
					},
					fail: () => {
						console.error('授权失败，请允许拨打电话权限！');
					}
				});
			},
			findHouseById(houseId) {
				findHouseById(houseId).then(result => {
					let room = result.data
					if (room.type == 1) {
						room.type = '整租'
					} else if (room.type == 2) {
						room.type = '合租'
					} else if (room.type == 3) {
						room.type = '门面旺铺'
					} else if (room.type == 4) {
						room.type = '临街摊位'
					}

					if (room.roomType == 1) {
						room.roomType = '主卧'
					} else if (room.roomType == 2) {
						room.roomType = '次卧'
					} else {
						room.roomType = '未知'
					}

					if (this.$u.test.isEmpty(room.houseNum)) {
						room.houseNum = ''
					}
					if (this.$u.test.isEmpty(room.houseHall)) {
						room.houseHall = ''
					}
					if (this.$u.test.isEmpty(room.toiletNum)) {
						room.toiletNum = ''
					}
					if (this.$u.test.isEmpty(room.floor)) {
						room.floor = ''
					} else {
						room.floor = room.floor + '层'
					}
					this.swiperlist = room.imageList.map(val => {
						let imgUrl = val.imgUrl
						imgUrl = val.imgUrl + "?x-oss-process=image/resize,h_600,m_lfit"
						return {
							title: val.imageName,
							image: imgUrl
						}
					})
					this.tagList = room.featureList.map(val => {
						return {
							title: val.feature,
						}
					})
					// if(!room.agentAvatar.includes(config.staticUrl)){
					// 	room.agentAvatar = config.staticUrl+room.agentAvatar
					// }
					this.user = room.user
					this.village = room.village
					this.room = room
					console.log('this.room=', this.room)
					// 判断是否收藏
					this.selectHouseHeart(houseId);
					//查询房源评价
					// this.selectHouseEvals(houseId);

					// 分享自定义标题与图片
					let shareTitle = ''
					if (room.type == '整租') {
						shareTitle = this.village.name + " " + this.room.houseNum + this.room
							.houseHall + this.room
							.toiletNum + " " + this.room.decoration + " ¥" + this.room.price + "/月"
					} else {
						shareTitle = this.village.name + " " + room.roomType + " " + this.room
							.decoration + " ¥" +
							this.room.price + "/月"
					}
					this.shareTitle = shareTitle
					// this.$u.mpShare = {
					// 	title:  shareTitle, // 默认为小程序名称，可自定义
					// 	// 支持PNG及JPG，默认为当前页面的截图
					// 	imageUrl: this.room.faceUrl, 
					// }
					if (navigator.userAgent.toLowerCase().match(/MicroMessenger/i) == "micromessenger") {
						this.getShareConfig()
					}


					// 添加到浏览历史
					let houseHistory = uni.getStorageSync('houseHistory')
					if (!houseHistory) {
						houseHistory = []
					}
					// 如果超过20个了，则删除最后一个
					if (houseHistory.length >= 20) {
						houseHistory.pop()
					}
					houseHistory.push(this.room)
					// 数据去重
					const keyArr = [];
					houseHistory.forEach((element, index) => {
						keyArr.push(element.code); // 通过code来判断
					});
					const newArr = [];
					const newKey = new Set(keyArr); // key去重
					newKey.forEach(item => {
						const index = keyArr.findIndex(item2 => item2 === item);
						newArr.push(houseHistory[index]);
					})
					uni.setStorageSync('houseHistory', newArr)

					console.log('this.room2=', this.room)

					// 经纬度
					this.longitude = room.longitude
					this.latitude = room.latitude
					// 计算距离
					let lat1 = 39.909
					let lng1 = 116.39742
					let lat2 = this.latitude
					let lng2 = this.longitude
					uni.getLocation({
						type: 'gcj02',
						success: res => {
							lat1 = res.latitude
							lng1 = res.longitude
							this.distance = this.getDistance(lat1, lng1, lat2, lng2);
						}
					})
				});
			},
			selectHouseHeart(houseId) {
				// 判断是否有userId
				let lifeData = uni.getStorageSync('lifeData');
				let vuex_user = lifeData.vuex_user
				if (vuex_user) {
					let url = "api/houseApi/selectHouseHeart";
					this.$u.get(url, {
						houseId: houseId,
						userId: vuex_user.user.userId,
					}).then(result => {
						this.room.heart = result.data
					});
				}
			},
			selectHouseEvals(houseId) {
				let url = "api/houseApi/selectHouseEvals";
				this.$u.get(url, {
					houseId: houseId,
					pageNum: 1,
					pageSize: 1
				}).then(result => {
					if (result.total > 0) {
						this.evaluate = result.rows[0].evaluate;
						if (this.evaluate.length > 30) {
							this.evaluate = this.evaluate.substring(0, 30) + "......";
						}
						this.credt = result.rows[0].createTime;
						this.havem = true;
						this.evalsize = result.total;
					}
				});
			},
			moreEval() {
				this.$u.route({
					url: '/pages/detail/evalList',
					params: {
						houseId: this.houseId
					}
				})
			},
			clickImg(index) {
				let imgArr = this.swiperlist.map(val => {
					return val.image
				})
				console.log(imgArr);
				// 预览图片
				uni.previewImage({
					current: index,
					urls: imgArr
				});
			},
			clickMap(e) {
				uni.openLocation({
					longitude: Number(this.longitude),
					latitude: Number(this.latitude),
					name: this.room.villageName,
					address: this.room.address
				})
			},
			getDistance(lat1, lng1, lat2, lng2) {
				lat1 = lat1 || 0;
				lng1 = lng1 || 0;
				lat2 = lat2 || 0;
				lng2 = lng2 || 0;
				var rad1 = lat1 * Math.PI / 180.0;
				var rad2 = lat2 * Math.PI / 180.0;
				var a = rad1 - rad2;
				var b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0;
				var r = 6378137;
				var distance = r * 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(rad1) * Math
					.cos(rad2) *
					Math.pow(Math.sin(b / 2), 2)));
				return (distance / 1000).toFixed(2);
			},


		}
	}
</script>

<style>
	/* page不能写带scope的style标签中，否则无效 */
	page {
		background-color: rgb(255, 255, 255);
	}
</style>


<style lang="scss" scoped>
	map {
		width: 100%;
		height: 350rpx;
	}

	.item {
		padding: 25rpx;
		line-height: 80rpx;
		margin-top: -30rpx;
	}

	.item-title {
		font-size: 42rpx;
		color: $u-main-color;
		font-weight: bold;
	}

	.item-price {
		font-weight: normal;
		font-size: 45rpx;
		color: $u-type-warning;
	}

	.item-desc {
		font-weight: normal;
		font-size: 36rpx;
		color: $u-tips-color;
	}

	.arrow-right {
		position: absolute;
		top: 80rpx;
		right: 28rpx;
		font-weight: normal;
		font-size: 28rpx;
		color: $u-tips-color;

		.phone {
			width: 90rpx;
			height: 90rpx;
			border-radius: 100%;
			box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, 0.1);
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	.wayClass {
		color: #606266;
		padding: 30rpx;
		line-height: 50rpx;
	}

	.clearBtn {
		margin: 0;
		padding: 0;
		line-height: 1;
		background-color: #FFFFFF;
	}

	.clearBtn::after {
		position: unset !important;
		border: unset;
	}

	.navigation {
		display: flex;
		justify-content: space-around;
		align-items: center;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 0rpx 15rpx;
		background-color: #ffffff;
		box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.05);
		z-index: 9999;

		.left {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 38rpx;
			font-size: 14px;
			color: #6a6a6a;

			.item {
				display: flex;

				.text {
					margin-left: 4rpx;
				}
			}
		}

		.right {
			display: flex;
			font-size: 28rpx;
			align-items: center;

			.btn {
				line-height: 66rpx;
				margin-left: 30rpx;
				padding: 5rpx 50rpx;
				color: #ffffff;
				border-radius: 36rpx;
				background-color: #2979ff;
			}
		}
	}
</style>